<template>
	<view class="columnbox content">
		<view class="top-box">医生已为您推荐了以下商品</view>
		<view @click="selectItem(item)" class="rowbox wdh-100 spb als one-goods" v-for="(item,index) in list"
			:key='index'>
			<template v-if="payStatus==1">
				<image v-if="item.selected" src="/static/img/sel.png" mode="widthFix" class="sel-icon"></image>
				<image v-else src="/static/img/un-sel.png" mode="widthFix" class="sel-icon"></image>
			</template>
			<image :src="item.images.split(',')[0]" mode="aspectFill" class="goods-img"></image>
			<view class="columnbox als goods-info">
				<view class="type-name">{{item.name}}
				</view>
				<view class="changjia">{{item.changjia}} </view>
				<view class="changjia">{{item.guige}}*{{item.danwei}} </view>
				<view class="rowbox wdh-100 spb" style="margin-top: 10rpx;">
					<view class="price">¥{{item.price}} </view>
					<view class="rowbox" v-if="payStatus==1">
						<template v-if="item.num>0">
							<view @click.stop="minusNum(item)" class="rowbox def-bgcol add-box-minus">
								<u-icon name="minus" color="#00b6b2" size="24rpx"></u-icon>
							</view>
							<view class="goods-num">{{item.num}}</view>
						</template>
						<view class="rowbox def-bgcol add-box" @click.stop="addNum(item)">
							<u-icon name="plus" color="#fff" size="24rpx"></u-icon>
						</view>
					</view>
					<view v-else class="goods-num">x {{item.num}}</view>
				</view>
			</view>
		</view>
		<template v-if="payStatus==1">
			<view class="wdh-100" style="height: 150rpx;"></view>
			<view class="rowbox wdh-100 spb submit-box">
				<view class="totalPrice">合计: <text>¥{{totalPrice}}</text> </view>
				<view class="def-bgcol rowbox submit-btn" @click="comfirmAdd">去结算</view>
			</view>
		</template>
	</view>
</template>

<script>
	// 环信即时通讯
	import SDK from 'js_sdk/easemob-im-uni-app/Easemob-chat';
	// 实例化 SDK 对象
	const WebIM = wx.WebIM = SDK;
	export default {
		data() {
			return {
				reconnectcount: 0,
				list: [],
				submitfalg: false,
				id: '',
				logo: '',
				name: '',
				payStatus: 0
			};
		},
		onLoad(options) {
			this.id = options.id * 1
			this.getDetail()
		},
		computed: {
			totalPrice() {
				let price = 0
				if (this.list.length > 0) {
					this.list.forEach(v => {
						price += v.selected ? v.price * v.num : 0
					})
				}
				return price.toFixed(2)
			},
			orderStatus() {
				let status = ''
				switch (this.payStatus) {
					case 1:
						status = '未支付'
						break;
					case 2:
						status = '已付款'
						break;
					case 3:
						status = '配送中'
						break;
					case 4:
						status = '已完成'
						break;
						// case 3:
						// 	status = '待发货'
						// 	break;
						// case 4:
						// 	status = '待收货'
						// 	break;
						// case 5:
						// 	status = '已完成'
						// 	break;
						// case 6:
						// 	status = '申请退款'
						// 	break;
						// case 7:
						// 	status = '同意退款'
						// 	break;
						// default:
						// 	status = '已取消'
						// 	break;
				}
				return status
			}
		},
		methods: {
			selectItem(v) {
				if (v.selected) {
					v.selected = false
				} else {
					if (v.num == 0) {
						v.num = 1
					}
					v.selected = true
				}
			},
			getDetail() {
				this.$req.post('/doctor/goodorderinfo', {
					id: this.id
				}).then(res => {
					res.data.data.List.forEach(resp => {
						resp.selected = true
					})
					this.list = res.data.data.List
					this.payStatus = res.data.data.status
					if (this.payStatus == 2) {
						uni.redirectTo({
							url: '/pages/order/detail?id=' + this.id
						})
					}
				})
			},
			minusNum(v) {
				v.num--
				if (v.num == 0) {
					v.selected = false
				}
			},
			addNum(v) {
				v.num++
				v.selected = true
			},

			getSelectList() {
				return new Promise(resolve => {
					let servetypeids = []
					this.list.forEach(res => {
						if (res.selected > 0) {
							servetypeids.push({
								goodid: res.id * 1,
								num: res.num * 1,
								price: res.price * 1,
								images: res.images.split(',')[0],
								name: res.name,
								changjia: res.changjia,
								guige: res.guige,
								danwei: res.danwei,
								id: res.id
							})
						}
					})
					resolve(servetypeids)
				})
			},
			async comfirmAdd() {
				let servetypeids = await this.getSelectList()
				if (servetypeids.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return false
				}
				uni.redirectTo({
					url: '/pages/order/detail?info=' + JSON.stringify(servetypeids) + '&id=' + this.id
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang, PingFang SC;
	}

	.top-box {
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		color: #5d5e5e;
		border-bottom: #f7f7fb solid 10rpx;
	}

	.one-goods {
		padding: 32rpx 32rpx;
		border-bottom: #f1f1f1 solid 1px;

		.sel-icon {
			width: 40rpx;
			height: 40rpx;
			margin-top: 50rpx;
		}

		.goods-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}

		.goods-info {
			width: calc(100% - 190rpx);
			font-size: 28rpx;
		}

		.changjia {
			font-size: 24rpx;
			line-height: 40rpx;
			color: #9d9fa1;
		}

		.price {
			font-size: 32rpx;
			color: #fc1f10;
			font-weight: bold;
		}

		.add-box,
		.add-box-minus {
			width: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
		}

		.add-box-minus {
			border: #00b6b2 solid 1px;
			background: #fff;
		}

		.goods-num {
			width: 120rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.submit-box {
		position: fixed;
		bottom: 0;
		background: #fff;
		padding: 20rpx 40rpx;
		border-top: #f1f1f1 solid 1px;
		padding-bottom: 40rpx;
	}

	.totalPrice {
		font-size: 28rpx;

		text {
			margin-left: 20rpx;
			font-size: 40rpx;
			color: #ff2917;
			font-weight: bold;
		}
	}

	.submit-btn {
		border-radius: 10rpx;
		width: 300rpx;
		height: 90rpx;
		color: #fff;
		font-size: 28rpx;
	}
</style>